<template>
  <div>
    <header-notice
      class="action"
      style="margin-right: 40px; vertical-align: middle;"
    />
    <a-dropdown
      style="display: inline-block; height: 100%; vertical-align: initial"
    >
      <span class="logout_title" style="cursor: pointer">
        <a-avatar
          class="avatar"
          size="small"
          shape="circle"
          :src="`${publicPath}avatar/${this.user.avatar}`"
        />
        <span class="curr-user">{{ user.userName }}</span>
      </span>
      <a-menu style="width: 150px" slot="overlay">
        <a-menu-item @click="updatePassword">
          <a-icon type="key" />
          <span>密码修改</span>
        </a-menu-item>
        <a-menu-item @click="handleSettingClick">
          <a-icon type="setting" />
          <span>系统定制</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <span class="action">
      <a class="logout_title" @click="logout">
        <a-icon type="logout" />
        <span>&nbsp;退出登录</span>
      </a>
    </span>
    <update-password
      @success="handleUpdate"
      @cancel="handleCancelUpdate"
      :user="user"
      :updatePasswordModelVisible="updatePasswordModelVisible"
    >
    </update-password>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import HeaderNotice from "../common/HeaderNotice";
import UpdatePassword from "../personal/UpdatePassword";

export default {
  name: "HeaderAvatar",
  components: { HeaderNotice, UpdatePassword },
  data() {
    return {
      searchMenuOptions: [],
      searchMenuComp: "span",
      searchMenuVisible: false,
      publicPath: process.env.BASE_URL,
      updatePasswordModelVisible: false
    };
  },
  computed: {
    ...mapState({
      settingBar: state => state.setting.settingBar.opened,
      user: state => state.account.user
    })
  },
  methods: {
    isMobile() {
      return this.$store.state.setting.isMobile;
    },
    handleSettingClick() {
      this.setSettingBar(!this.settingBar);
    },
    updatePassword() {
      this.updatePasswordModelVisible = true;
    },
    handleCancelUpdate() {
      this.updatePasswordModelVisible = false;
    },
    handleUpdate() {
      this.updatePasswordModelVisible = false;
      this.$message.success("更新密码成功，请重新登录系统");
      setTimeout(() => {
        this.logout();
      }, 1500);
    },
    logout() {
      const that = this;
      this.$confirm({
        title: "提示",
        content: "真的要注销登录吗 ?",
        onOk() {
          that
            .$get(`/api/logout/${that.user.activeId}`)
            .then(() => {
              return new Promise((resolve, reject) => {
                console.log(resolve, reject);
                that.$db.clear();
                location.reload();
              });
            })
            .catch(() => {
              that.$message.error("退出系统失败");
            });
        },
        onCancel() {}
      });
    },
    ...mapMutations({ setSettingBar: "setting/setSettingBar" })
  }
};
</script>

<style lang="less" scoped>
.ant-avatar-sm {
  width: 30px;
  height: 30px;
}
.avatar {
  margin: 10px 4px 13px 0;
  color: #1890ff;
  background: hsla(0, 0%, 100%, 0.85);
  vertical-align: middle;
}
.curr-user {
  font-weight: 600;
  margin-left: 6px;
  margin-right: 27px;
}
.logout_title {
  color: inherit;
  text-decoration: none;
}
</style>
